<div class="wrapper overflow-hidden">
    <a [routerLink]="['/index']" class="logo fl" nz-tooltip [nzTitle]="companyName" nzPlacement="bottomLeft">
        <span class="text"></span>
    </a>
    <ul nz-menu [nzMode]="'horizontal'" nzTheme="dark" class="fl menu-wrapper">
        <li nz-submenu routerLinkActive="ant-menu-submenu-selected"
            *ngFor="let itemMenu of menus">
            <span title class="f-title">
                <i *ngIf="false" nz-icon [type]="itemMenu?.iconCls" class="mg-r8"></i>
                {{itemMenu?.text}}
            </span>
            <ul>
                <ng-container *ngFor="let item of itemMenu?.children;">
                    <!--<li nz-submenu nzTitle="{{item?.text}}" *ngIf="item.uri === 'null'; else tpl;">-->
                    <li *ngIf="item?.children?.length > 0; else tpl;" nz-submenu>
                        <span title>
                            <i *ngIf="false" nz-icon [type]="item?.iconCls" class="mg-r8"></i>
                            {{item?.text}}
                        </span>
                        <ul>
                            <li *ngFor="let cItem of item?.children;"
                                routerLinkActive="ant-menu-item-selected"
                                nz-menu-item nz-tooltip nzPlacement="right">
                                <a [routerLink]="cItem?.uri" [ngStyle]="{display: 'block'}">
                                    <i *ngIf="false" nz-icon [type]="cItem?.iconCls" class="mg-r8"></i>
                                    {{cItem?.text}}
                                </a>
                            </li>
                        </ul>
                    </li>
                    <ng-template #tpl>
                        <li routerLinkActive="ant-menu-item-selected"
                            nz-menu-item nz-tooltip nzPlacement="right">
                            <a [routerLink]="item?.uri" [ngStyle]="{display: 'block'}">
                                <i *ngIf="false" nz-icon [type]="item?.iconCls" class="mg-r8"></i>
                                {{item?.text}}
                            </a>
                        </li>
                    </ng-template>
                </ng-container>
            </ul>
        </li>
    </ul>
    <div class="user-info mg-r30 fr">
        <button nz-button nzType="primary" nzSize="small" [ngStyle]="{'margin': '8px'}"
                (click)="changeLang()">{{browserLang === 'zh' ? 'English' : '中文'}}</button>
        <nz-dropdown [nzPlacement]="'bottomRight'">
            <div nz-dropdown class="nav-item">
                <nz-avatar nzIcon="user" nzSize="small"></nz-avatar>
                {{(userInfo$ | async)?.name}}
            </div>
            <ul nz-menu style="margin-top: -10px;">
                <li nz-menu-item (click)="testApi()">
                    <a>资源调用</a>
                </li>
                <li nz-menu-item>
                    <a>修改密码</a>
                </li>
                <li nz-menu-item>
                    <a href="http://help.gerpgo.com/web/#/1" target="_blank" >帮助文档</a>
                </li>
                <li nz-menu-item (click)="logout()">
                    <a class="logout">退出</a>
                </li>
            </ul>
        </nz-dropdown>
    </div>
</div>

